<!DOCTYPE html>
<html lang="en">
<head>
  <title>百度三维地图</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
  <title>地图底图</title>
  <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    ol li,
    ul li {
      list-style: none;
    }

    #map_canvas {
      width: 100%;
      height: 100%;
    }
    .infoBoxContent {
      font-size: 12px;
    }

    .infoBoxContent .title {
      height: 42px;
      width: 272px;
    }

    .infoBoxContent .title strong {
      font-size: 14px;
      line-height: 42px;
      padding: 0 10px 0 5px;
    }

    .infoBoxContent .title .price {
      color: #FFFF00;
    }

    .infoBoxContent .list {
      width: 268px;
      border: solid 1px #4FA5FC;
      border-top: none;
      background: #fff;
      height: 260px;
    }

    .infoBoxContent .list ul {
      margin: 0;
      padding: 5px;
    }

    .infoBoxContent .list ul li {
      float: left;
      width: 255px;
      border-bottom: solid 1px #4FA5FC;
      padding: 2px 0;
    }

    .infoBoxContent .list ul .last {
      border: none;
    }

    .infoBoxContent .list ul img {
      width: 53px;
      height: 42px;
      margin-right: 5px;
    }

    .infoBoxContent .list ul p {
      padding: 0;
      margin: 0;
    }

    .infoBoxContent .left {
      float: left;
    }

    .infoBoxContent .rmb {
      float: right;
      color: #EB6100;
      font-size: 14px;
      font-weight: bold;
    }

    .infoBoxContent a {
      color: #0041D9;
      text-decoration: none;
    }

    #btns {
      z-index: 999;
      position: fixed;
      bottom: 3.5rem;
      margin-left: 2.5rem;
      padding-left: 0;
      border-radius: .25rem;
      display: flex;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      text-align: center;
    }

    #btns li {
      border-right: 1px solid #d2d2d2;
      padding: 10px 10px;
      height: 100%;
      background-color: #fff;
      cursor: pointer;
      color: #3a79b5;
    }

    .info {
      z-index: 999;
      width: auto;
      min-width: 22rem;
      padding: .75rem 1.25rem;
      right: 5rem;
      position: fixed;
      top: 2rem;
      background-color: rgba(265, 265, 265, 0.9);
      border-radius: .25rem;
      font-size: 14px;
      color: #666;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.3);
    }
    #zoominput {
      height: 24px;
      width: 80px;
      padding-left: 8px;
    }
    #change-btn {
      height: 30px;
      background: #5679ea;
      border: 0;
      padding: 0 10px 0 10px;
      margin: 10px 8px 0 0;
      cursor: pointer;
      border-radius: 2px;
      color: #fff;
      font-size: 14px;
    }

    .info {
      z-index: 999;
      width: auto;
      min-width: 22rem;
      padding: .75rem 1.25rem;
      margin-left: 1.25rem;
      position: fixed;
      top: 1rem;
      background-color: #fff;
      border-radius: .25rem;
      font-size: 14px;
      color: #666;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .drawing-panel {
      z-index: 999;
      position: fixed;
      bottom: 8.5rem;
      margin-left: 2.5rem;
      padding-left: 0;
      border-radius: .25rem;
      height: 47px;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .bmap-btn {
      border-right: 1px solid #d2d2d2;
      float: left;
      width: 64px;
      height: 100%;
      background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
      cursor: pointer;
    }
    .drawing-panel .bmap-marker {
      background-position: -65px 0;
    }
    .drawing-panel .bmap-polyline {
      background-position: -195px 0;
    }
    .drawing-panel .bmap-rectangle {
      background-position: -325px 0;
    }
    .drawing-panel .bmap-polygon {
      background-position: -260px 0;
    }
    .drawing-panel .bmap-circle {
      background-position: -130px 0;
    }

  </style>

  <!--  去除“百度地图”左下角字样  -->
  <style type="text/css">
    .BMap_cpyCtrl {
      display: none;
    }
    .anchorBL {
      display: none;
    }
  </style>
  <link type="text/css" rel="stylesheet" href="../css/api.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>

  <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=baiduKey"></script>

  <script type="text/javascript" src="../js/stations.js"></script>
  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js"></script>


  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js"></script>

  <script src="//mapv.baidu.com/build/mapv.min.js"></script>
  <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.119/dist/mapvgl.min.js"></script>

  <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
  <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>

  <link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  <script type="text/javascript" src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
  <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>

  <!--  <script type="text/javascript" src="../js/BMapGLLib/RichMarkerGL.js"></script>-->
  <script type="text/javascript" src="../js/MapLib/CoordTransferd.js"></script>
  <script type="text/javascript" src="../js/MapLib/proj4-src.js"></script>

  <script type="text/javascript" src="../data/points-sample-data.js"></script>
  <script type="text/javascript" src="../js/mainGL.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/01addMap.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/02addControl.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/03mapProperty.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/04styleMap.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/05marker.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/06vectorsymbol.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/07layers.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/08infoWindow.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/09richMarker.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/10mapEvents.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/11ContextMenu.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/12cluster.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/13routeSearch.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/14geoLocation.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/15addressDecode.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/16autoComplete.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/17animation.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/18track.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/19lushu.js"></script>
  <script type="text/javascript" src="../js/BMapGLLib/library/20MapTools.js"></script>
<!--  此Key为测试用，可能随时会被删除，请替换为自己的key。-->
</head>
<body>

<ul class = "drawing-panel">
  <li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>
</ul>

<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;"></div>

<div id="results" style="width:400px;height: 500px;position: absolute;margin-top: 230px;margin-left:5px;z-index: 100; background-color: #4FA5FC;display: block;" >

</div>

<div class = "info">
  <div>改变地图级别:</div>
  <input id="zoominput" type="number" step="1" min="4" max="20" value="10")>
  <button id="change-btn1" onclick="setNewZoom()">设置级别</button>
  <button id="change-btn2" onclick="map.zoomIn()">放大一级</button>
  <button id="change-btn3" onclick="map.zoomOut()">缩小一级</button>
  <button id="change-btn4" onclick="getMapZoom()">获取当前级别</button>
  <div>
    <button  onclick = "showText()">显示POI文字</button>
    <button  onclick = "hideText()">隐藏POI文字</button>
    <br/>
    <button  onclick = "showIcon()">显示POI的Icon</button>
    <button  onclick = "hideIcon()">隐藏POI的Icon</button>
    <br/>
    <button  onclick = "showOverlay()">显示覆盖物</button>
    <button  onclick = "hideOverlay()">隐藏覆盖物</button>
    <br/>
    <button  onclick = "show3Dbuild()">显示3D建筑物</button>
    <button  onclick = "hide3Dbuild()">隐藏3D建筑物</button>
    <br/>
    <button  onclick = "showTilelay()">显示图层</button>
    <button  onclick = "hideTilelay()">隐藏图层</button>
  </div>
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:5px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: royalblue;color: antiquewhite;" type="button" value="景泰蓝" onclick="setMapStyleFromId()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: #397d4e; color: antiquewhite;" type="button" value="葱油绿" onclick="setMapStyleFromJson()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue;color: antiquewhite;" type="button" value="普通模式" onclick="setMapNormal()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="地球模式" onclick="setMapEarth()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue;color: antiquewhite;" type="button" value="标注" onclick="addMapMarker()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 830px;margin-left:105px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="镂空面" onclick="getBoundary()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="线面圆可编辑" onclick="editPolygon()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="贝塞尔曲线" onclick="addBezierCurve()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="3D棱柱" onclick="addPrism()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 830px;margin-left:205px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="地面图片层" onclick="addGroundOverlay()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="地面Canvas层" onclick="addCanvasLayer()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="地面视频层" onclick="addVideoLayer()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="交通路况" onclick="addTrafficLayer()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:305px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="信息窗口" onclick="addSimpleInfo()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="Html信息" onclick="addContentInfo()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="窗口内容" onclick="getInfoContent()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="InfoBox窗口" onclick="addInfoBox()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="RichMarker窗口" onclick="addRichMarker()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:405px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="加载完成事件" onclick="addMapLoaded()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="添加点击事件" onclick="addMapClick()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="删除点击事件" onclick="removeMapClick()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="右键菜单" onclick="addMapContextMenu()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="删除右键" onclick="removeMapContextMenu()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:505px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="聚合" onclick="addClusters()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="地址解析" onclick="geoCode()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="地址逆解析" onclick="geoDecode()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:605px;z-index: 100;">
  <select id="routeSelect" style="width: 100px;height: 30px;padding-left: 5px; background-color: steelblue;color: antiquewhite;"  onChange="changeRouteType()">
    <option value="none">路线类型</option>
    <option value="drive">驾车路线</option>
    <option value="bus">公交路线</option>
    <option value="walk">步行路线</option>
<!--    <option value="ride">骑行路线</option>-->
  </select>
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="关键字查询" onclick="poiSearch()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="附件查询" onclick="nearbySearch()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="范围查询" onclick="inBoundSearch()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="自动完成" onclick="addAutocomplete()">

</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:705px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="动画" onclick="addMapAnimations()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="flyTo" onclick="setMapFly()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="panTo" onclick="setMapPan()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="轨迹" onclick="addTracker()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="路书" onclick="addLushu()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:805px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="城市名定位" onclick="theLocation()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="经纬度定位" onclick="panToMap()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="浏览器定位" onclick="geoLocation()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="IP定位" onclick="cityLocation()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="辅助定位" onclick="sdkLocation()">
</div>

<div style="width: 200px;height: 100px;position: absolute;margin-top: 800px;margin-left:905px;z-index: 100;">
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="开启测距" onclick="openMapDis()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="关闭测距" onclick="closeMapDis()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="开启测面" onclick="addAreaMeasure()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="关闭测面" onclick="addDrawManager()">
  <br/>
  <input style="width: 80px;height: 30px;padding-left: 10px; background-color: steelblue; color: antiquewhite;" type="button" value="绘制功能" onclick="sdkLocation()">
</div>


<div id="allmap"></div>

</body>
</html>
<script type="text/javascript">
  setMap();

  /**
   * 关键字查询必需和html页面在一起，否则页面的图标无法出现。
   **/

  let local = null; //公共变量 查询对象
  let rendOpts = {
    map:map,
    autoViewport:true,
    panel:"results",
    selectFirstResult:false
  };

  var searchOpts = {
    renderOptions: rendOpts,
    pageCapacity:6,
    onSearchComplete:function (results) {
      if(local.getStatus() == BMAP_STATUS_SUCCESS){
        var s = [];
        for(var i=0;i<results.getCurrentNumPois();i++){
          s.push(results.getPoi(i).title + "," + results.getPoi(i).address);
        }
        console.log(s.join("<br>"));
      }
    }
  };

  function clearSearch(){
    if(local){
      local.clearResults();
    }
  };

  /**
   * POI搜索
   */
  function poiSearch(){
    clearSearch();
    local = new BMapGL.LocalSearch(map,searchOpts);
    local.search("公园");
  };

  /**
   * 附近搜索
   */
  function nearbySearch(){
    clearSearch();
    local = new BMapGL.LocalSearch(map,searchOpts);
    local.searchNearby("酒店","北京大学");
  };

  /**
   * 范围查询
   */
  function inBoundSearch(){
    clearSearch();
    map.centerAndZoom(new BMapGL.Point(116.274625,39.961627), 13);

    local = new BMapGL.LocalSearch(map,searchOpts);
    var pStart = new BMapGL.Point(116.274625,39.961627);
    var pEnd = new BMapGL.Point(116.367474,39.988609);
    var bs = new BMapGL.Bounds(pStart,pEnd);   //自己规定范围

    local.searchInBounds("银行",bs);
    var polygon = new BMapGL.Polygon([
      new BMapGL.Point(pStart.lng,pStart.lat),
      new BMapGL.Point(pEnd.lng,pStart.lat),
      new BMapGL.Point(pEnd.lng,pEnd.lat),
      new BMapGL.Point(pStart.lng,pEnd.lat)
    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    map.addOverlay(polygon);
  };

</script>
